<script setup>
import { onMounted, ref } from "vue";
import { workListApi,delWorkByIdApi,updateworkApi } from "@/apis/work";
import { ElMessage } from "element-plus";
import MenuItem from "@/components/MenuItem.vue";

// 作品分页
const workData = ref();
const workTotal = ref();
const currentPage = ref(1);
// 是否开启按钮删除和修改
const workDel = ref(true);
const workUpdate = ref(true);
const workSelect = ref();
// 修改弹窗
const workDialog = ref(false);
// 修改管理员信息
const updateWorkInfo = ref()


// 作品查询字段
const workParam = ref({
  userName: "",
  workTitle: "",
  workContent: "",
});

onMounted(() => {
  workInit();
})

const workInit = async () => {
  const res = await workListApi();
  workData.value = res.data.records;
  workTotal.value = res.data.total;
};

// 进行模糊查询
const workSearch = async () => {
  const res = await workListApi(null, workParam.value);
  workData.value = res.data.records;
  workTotal.value = res.data.total;
};

const workChange = async (e) => {
  currentPage.value = e;
  const res = await workListApi({ currentPage: e }, workParam.value);
  workData.value = res.data.records;
  workTotal.value = res.data.total;
};

// 管理员勾选
const workSelectionChange = (e) => {
  workSelect.value = e;
  if (e.length > 0) {
    // 可以进行删除和修改
    workDel.value = false;
    if (e.length == 1) {
      workUpdate.value = false;
    } else {
      workUpdate.value = true;
    }
  }
  if (e.length == 0) {
    workDel.value = true;
    workUpdate.value = true;
  }
};

// 执行删除按钮
const workDelBtn = async () => {
  for (let i = 0; i < workSelect.value.length; i++) {
    const workId = workSelect.value[i].workId;
    // 调用删除接口
    const res = await delWorkByIdApi({ workId: workId });
    ElMessage.success(res.msg);
  }
  workDel.value = true;
  workInit();
};

// 出现修改弹窗
const workUpdateBtn =  () => {
  workDialog.value = true;
  // 进行深拷贝不修改原来的gender
  updateWorkInfo.value = JSON.parse(JSON.stringify(workSelect.value[0]));
};

// 执行修改按钮
const workUpdateConfirm = async () => {
  // 调用修改接口
  updateWorkInfo.value.avatarImg = null
  updateWorkInfo.value.indexImg = null
  workDialog.value = false;
  const res = await updateworkApi(updateWorkInfo.value);
  workInit();
  ElMessage.success(res.msg);
}

</script>
<template>
 <MenuItem class="pageIndex">
        <template #search>
          <div class="search-container">
            <!-- 第二行的3个输入框和一个按钮 -->
            <el-input
              v-model="workParam.userName"
              style="width: 400px; height: 40px"
              placeholder="请输入用户名称"
              clearable
            />
            <el-input
              v-model="workParam.workTitle"
              style="width: 400px; height: 40px"
              placeholder="请输入作品标题"
              clearable
            />
            <el-input
              v-model="workParam.workContent"
              style="width: 400px; height: 40px"
              placeholder="请输入作品内容"
              clearable
            />
            <a-button
              type="primary"
              @click="workSearch"
              style="width: 150px; height: 40px"
              >查询</a-button
            >
          </div>
        </template>
        <template #action>
          <a-button
            type="primary"
            :disabled="workDel"
            :loading="loading"
            @click="workDelBtn"
            style="margin: 0px 5px"
            >删除</a-button
          >
          <a-button
            type="primary"
            :disabled="workUpdate"
            :loading="loading"
            @click="workUpdateBtn"
            style="margin: 0px 5px"
            >修改</a-button
          >
        </template>
        <template #table>
          <el-table :data="workData" style="width: 100%; height: 100%"
          @selection-change="workSelectionChange"
          >
            <el-table-column type="selection" />
            <el-table-column property="indexImg" label="作品封面" width="200">
              <template #default="scope">
                <img
                  :src="scope.row.indexImg"
                  style="width: 50px; height: 50px"
                />
              </template>
            </el-table-column>
            <el-table-column property="avatarImg" label="用户头像" width="200">
              <template #default="scope">
                <img
                  :src="scope.row.avatarImg"
                  alt=""
                  style="width: 50px; height: 50px"
                />
              </template>
            </el-table-column>
            <el-table-column property="userName" label="用户名称" width="250" />
            <el-table-column
              property="workTitle"
              label="作品标题"
              width="300"
            />
            <el-table-column
              property="workContent"
              label="作品内容"
              width="500"
            />
            <el-table-column property="createTime" label="创建时间" />
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="workTotal"
            :current-page="currentPage"
            @current-change="workChange"
          />
        </template>
      </MenuItem>
      <el-dialog v-model="workDialog" title="作品信息" width="500" draggable>
        <el-form
          label-width="auto"
          :model="updateWorkInfo"
        >
          <el-form-item label="作品标题：">
            <el-input v-model="updateWorkInfo.workTitle" />
          </el-form-item>
          <el-form-item label="作品内容：">
            <el-input 
              type="textarea" 
              v-model="updateWorkInfo.workContent" 
              :autosize="{ minRows: 2, maxRows: 6 }"
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="workDialog = false">取消</el-button>
            <el-button type="primary" @click="workUpdateConfirm">
              修改
            </el-button>
          </div>
        </template>
      </el-dialog>
</template>
<style scoped>

</style>
